<template>
  <div class="main">
    <div class="header">
      <a href="/">
        <img>
      </a>
      <h1>用户注册</h1>
    </div>
    <el-form ref="registerForm" :rules="formRules" :model="form" label-width="0px">
      <el-form-item prop="email">
        <label for="email">邮箱</label>
        <el-input placeholder="请输入Email" prefix-icon="el-icon-user-solid" v-model="form.email" type="email" autofocus>
        </el-input>
      </el-form-item>
      <el-form-item prop="username">
        <label for="username">昵称</label>
        <el-input placeholder="请输入昵称"  prefix-icon="el-icon-user-solid" v-model="form.username">
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <label for="password">密码</label>
        <el-input placeholder="请输入密码"  prefix-icon="el-icon-lock" v-model="form.password" show-password type="password">
        </el-input>
      </el-form-item>
      <el-form-item>
        <button type="submit" @click="register()" class="btn btn-success btn-block">注册</button>
      </el-form-item>
    </el-form>
    <div class="message">
      <p>已有账号? <router-link to='/login'>点击登录</router-link></p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        email: '',
        username: '',
        password: ''
      },
      formRules: {
        username: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 1 到 8 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入Email', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 14, message: '长度在 6 到 14 个字符且必须包含字母', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    register() {
      this.$refs.registerForm.validate(async val => {
        if (!val) { return }
        var ret = await this.$http.post('/register', this.form)
        if (ret.data.err_code === 0) {
          this.$message({
            message: '恭喜你,注册成功!',
            type: 'success'
          })
          this.$router.push({ path: 'login' })
        }
      })
    }
  }

}

</script>

<style scoped>
body {
  background-color: #f9f9f9;
}

.main {
  width: 340px;
  margin: 0 auto;
  margin-top: 50px;
  color: #333;
}

.main .header {
  text-align: center;
}

.main .header h1 {
  font-size: 26px;
}

.main form {
  padding: 20px;
  margin-bottom: 15px;
  border: 1px solid #d8dee2;
  border-radius: 5px;
  background-color: #fff;
}

.main .message {
  padding: 10px;
  padding-bottom: 0;
  border: 1px solid #d8dee2;
  border-radius: 5px;
}

</style>
